import { defineComponent, ref } from 'vue'

export default defineComponent({
    setup(){
        let title = ref('')
        let todos = ref([{title:'学习', done: true}, { title:'游泳', done: false }])
        function addTodos(){
            if(title.value !=''){
                todos.value.push({
                    title: title.value,
                    done: false
                })
                title.value = ''
            }
        }

        return ()=><div>
            <input type="text" vModel={ title.value }/>
            <button onClick={ addTodos }>按钮</button>
            <ul>
                {
                    todos.value.length? todos.value.map((todo)=>{
                        return <li>{ todo.title }</li>
                    }) :<li>no data</li>
                }
            </ul>
        </div>
    }
})